<template>
  <div class="casc-container">
    <div class="casc-logo">联合攻防体系智能训练平台</div>

    <div class="casc-item deep">
      <div class="casc-item-title" @click="openAlpha">
        <span style="display: flex;flex-direction: column;align-items: center">
          <p style="color: #e2ce4a;font-size:24px;">面向体系的</p>
          <p style="color: #e2ce4a;font-size:24px;margin-top:10px">智能体训练评估子系统</p>
        </span>
      </div>
    </div>
    <div class="casc-item entry">
      <div class="casc-item-title" @click="openAdminto">
        <span  style="display: flex;flex-direction: column;align-items: center">
          <p style="color: #41cbc6;font-size:24px;">面向开发人员的</p>
          <p style="color: #41cbc6;font-size:24px;margin-top:10px;margin-bottom:10px">智能体管理服务</p>
          <p style="color: #41cbc6;font-size:24px;">子系统</p>
        </span>
      </div>
    </div>
    <div class="casc-item intensify">
      <div class="casc-item-title" @click="openBeta">
        <span  style="display: flex;flex-direction: column;align-items: center">
          <p style="color: #41cbc6;font-size:20px;">面向体系的</p>
          <p style="color: #41cbc6;font-size:20px;">智能体分布式计算子系统</p>
        </span>
      </div>
    </div>
    <!-- <div class="casc-item large-model">
			<div class="casc-item-title" @click="openLargeModel">
				<span>大模型平台</span>
			</div>
    </div>-->
  </div>
</template>

<script>
import Vue from "vue";
import { login } from "@/api/login";
import { setCookie, getCookie } from "@/utils/tool";
import { encrypt } from "@/utils/rsaEncrypt";
import { getuserRoleMenuById } from '@/api/routeAuth'

export default {
  data() {
    return {
      app_user: process.env.VUE_APP_USER,
      host: window.location.host,
      hostIp: null,
      deepPort: "",
      intensifyPort: "",
      adminPort: "",
      ModelPort: ""
    };
  },
  async mounted() {
    this.hostIp = this.host.split(":")[0];
    if (["htzny"].includes(this.app_user) && !getCookie("login_ticket")) {
      if (!this.$route.query.code) return;
      let [err, res] = await this.$awaitWrap(
        login({
          client_id: "platform",
          client_secret: encodeURIComponent(encrypt("123456")),
          grant_type: "password",
          password: encodeURIComponent(encrypt("123456")),
          username: "admin",
          code: this.$route.query.code
        })
      );
      console.log("login:", err, res);
      setCookie("login_ticket", `Bearer ${res.data.access_token}`);
      setCookie("refresh_token", res.data.refresh_token);
      Vue.prototype.$indexReload = 1;
    }
  },
  methods: {
    async getRoles() {
      let value = getCookie('roles');
      console.log('value',typeof value)
      if(value!=''){
      let value = getCookie('roles');
      console.log('value',value)
			const res = await getuserRoleMenuById(value)
      console.log('res',res)
			this.selectedPaths = res.data.filter(item => item.selected).map(item => `/${item.path}`);
			console.log(this.selectedPaths);
			setCookie('path', this.selectedPaths);
      }

    },
    openAlpha() {

      if (this.hostIp.includes("56.12")) {
        if (["alpha", "beta"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8081";
        }
        if (["delta", "gamma"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8083";
        }
      } else if (this.hostIp.includes("8.200")) {
        if (["alpha", "beta"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8081";
        }
        if (["delta", "gamma"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8088";
        }
      } else if (this.hostIp.includes("localhost")) {
        this.deepPort = "8080";
      } else {
        if (["alpha", "beta"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8081";
        }
        if (["delta", "gamma"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8082";
        }
      }


let usernames = getCookie('username');

console.log('usernames',usernames)

if(usernames=='admin'){
      var url = `http://${this.hostIp}:${this.deepPort}/#/notebook`;
    window.open(url, "_self");
}else{
this.getRoles().then(() => {
    var url = `http://${this.hostIp}:${this.deepPort}/#/notebook`;
    window.open(url, "_self");
  }).catch((error) => {
    // Handle any errors from getRoles
    console.error('Error executing getRoles:', error);
  });
}
      

    },
    openBeta() {
      if (this.hostIp.includes("56.12")) {
        if (["alpha", "beta"].includes(process.env.VUE_APP_VERSIONS)) {
          this.intensifyPort = "8082";
        }
        if (["delta", "gamma"].includes(process.env.VUE_APP_VERSIONS)) {
          this.intensifyPort = "8085";
        }
      } else if (this.hostIp.includes("8.200")) {
        if (["alpha", "beta"].includes(process.env.VUE_APP_VERSIONS)) {
          this.intensifyPort = "8082";
        }
        if (["delta", "gamma"].includes(process.env.VUE_APP_VERSIONS)) {
          this.intensifyPort = "8087";
        }
      } else if (this.hostIp.includes("localhost")) {
        this.intensifyPort = "8081";
      } else {
        if (["alpha", "beta"].includes(process.env.VUE_APP_VERSIONS)) {
          this.intensifyPort = "8083";
        }
        if (["delta", "gamma"].includes(process.env.VUE_APP_VERSIONS)) {
          this.intensifyPort = "8084";
        }
      }
    let usernames = getCookie('username');
console.log('usernames',usernames)
if(usernames=='admin'){
      var url = `http://${this.hostIp}:${this.intensifyPort}/#/gameExperiment`;
      window.open(url, "_self");
}else{
this.getRoles().then(() => {
      var url = `http://${this.hostIp}:${this.intensifyPort}/#/gameExperiment`;
      window.open(url, "_self");
  }).catch((error) => {
    // Handle any errors from getRoles
    console.error('Error executing getRoles:', error);
  });
}




    },
    openLargeModel() {
      if (this.hostIp.includes("56.12")) {
        this.ModelPort = "8089";
      }

      if (this.hostIp.includes("8.200")) {
        this.ModelPort = "8089";
      }

      var url = `http://${this.hostIp}:${this.ModelPort}`;
      window.open(url, "_self");
    },
    openAdminto() {
      if (this.hostIp.includes("56.12")) {
        this.adminPort = "8081";
      } else if (this.hostIp.includes("8.200")) {
        this.adminPort = "8081";
      } else if (this.hostIp.includes("localhost")) {
        this.adminPort = "8080";
      } else {
        this.adminPort = "8081";
      }

      var url = `http://${this.hostIp}:${this.adminPort}/console`;
      window.open(url, "_self");
    }
  }
};
</script>

<style lang="less" scoped>
.casc-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url(~@/assets/img/bg-01.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .casc-logo {
    // width: 28.125rem;
    height: 160px;
    // background: url(~@/assets/img/casc-logo.png) no-repeat;
    background-size: 100% auto;
    background-position: center;

    text-align: center;
    font-size: 64px;
    font-weight: 700;
    line-height: 2em;
    background: -webkit-linear-gradient(bottom, #b7f3ff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .casc-item {
    position: absolute;
    width: 16.625rem;
    height: 37.4375rem;
    background-size: auto 100%;
    background-repeat: no-repeat;
    top: 200px;
    transform: scale(0.9);

    .casc-item-title {
      position: relative;
      width: 16.625rem;
      height: 16.625rem;
      background-size: 40% 40%;
      background-repeat: no-repeat;
      background-position: center 10%;
      display: flex;
      justify-content: center;
      cursor: pointer;

      span {
        position: absolute;
        font-size: 34px;
        bottom: 33%;
      }
    }

    &.deep {
      background-image: url(~@/assets/img/casc-item-02.png);
      left: 200px;
      top: 150px;
      animation: 3s deep infinite forwards;

      .casc-item-title {
        background-image: url(~@/assets/img/casc-item-02-title.png);
        color: #e2ce4a;
        span {
          width: 91%;
          line-height: 40px;
          text-align: center;
          left: 12px;
          bottom: 30%;
        }
      }
    }

    &.entry {
      background-image: url(~@/assets/img/casc-item-11.png);
      right: 60px;
      //top: 80px;
      transform: scale(0.7);
      animation: 3s entry infinite forwards;

      .casc-item-title {
        background-size: 33% 33%;
        background-position: 35% 10%;
        background-image: url(~@/assets/img/casc-item-11-title.png);
        color: #4ae287;

        span {
          width: 62%;
          line-height: 40px;
          text-align: center;
          left: 30px;
          bottom: 26%;
        }
      }
    }

    &.intensify {
      background-image: url(~@/assets/img/casc-item-03.png);
      right: 350px;
      top: 80px;
      transform: scale(0.7);
      animation: 3s intensify infinite forwards;

      .casc-item-title {
        background-image: url(~@/assets/img/casc-item-03-title.png);
        color: #41cbc6;
      }
    }

    &.large-model {
      background-image: url(~@/assets/img/casc-item-04.png);
      right: 60px;
      top: 200px;
      animation: 3s largeModel infinite forwards;

      .casc-item-title {
        background-image: url(~@/assets/img/casc-item-04-title.png);
        color: #d89224;
      }
    }
  }
}

@keyframes deep {
  0%,
  100% {
    top: 150px;
  }

  50% {
    top: 160px;
  }
}

@keyframes intensify {
  0%,
  100% {
    top: 80px;
  }

  50% {
    top: 70px;
  }
}

@keyframes largeModel {
  0%,
  100% {
    top: 200px;
  }

  50% {
    top: 210px;
  }
}

@keyframes entry {
  0%,
  100% {
    top: 200px;
  }

  50% {
    top: 190px;
  }
}
</style>
